<template>
  <div>
    <el-header style="height: 3vh;line-height: 3vh">
      <h3>
        {{routerRow.physicsTableName}}
      </h3>
    </el-header>
    <el-main>
      <el-tabs v-model="activeName">
<!--        概览,数据,表结构,数据集成,清洗规则,血缘关系,高级选项-->
        <el-tab-pane label="概览" name="概览">
          <el-descriptions title="源头表信息">
            <el-descriptions-item label="外部数据源名称">{{overview.sourceTable.externalDataSourceName}}</el-descriptions-item>
            <el-descriptions-item label="源头表">{{overview.sourceTable.physicsTableName}}</el-descriptions-item>
            <el-descriptions-item label="源头表数据量">{{overview.sourceTable.dataVolume}}</el-descriptions-item>
            <el-descriptions-item label="数据特征">{{overview.sourceTable.dataFeature}}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions style="margin-top: 5vh;border-top: 1px solid #ebeef5;padding-top: 20px" title="本表信息">
            <el-descriptions-item label="位置">{{overview.thisTable.location}}</el-descriptions-item>
            <el-descriptions-item label="表名">{{overview.thisTable.tableName}}</el-descriptions-item>
            <el-descriptions-item label="数据量(条)">{{overview.thisTable.dataVolume}}</el-descriptions-item>
            <el-descriptions-item label="累计起始时间">{{overview.thisTable.cumulativeStartTime}}</el-descriptions-item>
            <el-descriptions-item label="累计截止时间">{{overview.thisTable.cumulativeEndTime}}</el-descriptions-item>
            <el-descriptions-item label="责任单位">{{overview.thisTable.responsibleUnit}}</el-descriptions-item>
            <el-descriptions-item label="模式">{{overview.thisTable.mode}}</el-descriptions-item>
            <el-descriptions-item label="物理表名">{{overview.thisTable.physicsTableName}}</el-descriptions-item>
            <el-descriptions-item label="字段(个)">{{overview.thisTable.field}}</el-descriptions-item>
            <el-descriptions-item label="数据特征">{{overview.thisTable.dataFeature}}</el-descriptions-item>
            <el-descriptions-item label="集成情况">{{overview.thisTable.integrationSituation}}</el-descriptions-item>
            <el-descriptions-item label="数据上次更新">{{overview.thisTable.dataLastUpdateTime}}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{overview.thisTable.createTime}}</el-descriptions-item>
            <el-descriptions-item label="最后修改时间">{{overview.thisTable.lastModifyTime}}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="数据" name="数据">
          <div class="dataPageSearch">
<!--            //筛选条件搜索框-->
            <span>筛选条件：</span>
            <el-input style="width: 300px" @focus="dataPage.filterateDialogVisible = true" placeholder="点击添加筛选条件" v-model="dataPage.searchContent" clearable>
              <el-button @click="dataPage.filterateDialogVisible = true" slot="prepend" icon="el-icon-search"></el-button>
            </el-input>
            <div style="display: inline-block; margin-left: 3vw">
              <el-button type="primary">查询</el-button>
              <el-button>重置</el-button>
              <el-button style="margin-left: 2vw" type="success">导出</el-button>
            </div>
          </div>
          <div class="dataPageTableBox" style="overflow-y: scroll">
            <el-table
              :data="dataPage.showTableData"
              style="width: 100%"
            >
              <el-table-column
                v-for="item in dataPage.tableLabel"
                :prop="item.prop"
                :label="item.label"
                width="180">
              </el-table-column>

            </el-table>
          </div>
          <el-footer>
            <el-row style="margin-top: 1vh;" :gutter="30">
              <el-col :span="16">
                <div id="now_line_number">共{{dataPage.totalNumber}}条数据</div>
              </el-col>
              <el-col :span="5">
                <div>
                  <el-pagination
                    id="controlBigPosition"
                    background
                    :current-page="dataPage.currentPage"
                    :page-sizes="[20, 50, 100, 200, 300]"
                    :page-size="dataPage.size"
                    layout="sizes, prev, pager, next, jumper"
                    :total="dataPage.totalNumber"
                    @size-change="dataPageHandleSizeChange"
                    @current-change="dataPageHandleCurrentChange"
                  />
                </div>

              </el-col>
            </el-row>

          </el-footer>
        </el-tab-pane>
        <el-tab-pane label="表结构" name="表结构">
          <div class="mainInfo">
            <el-descriptions title="主要信息">
              <el-descriptions-item label="物理表名">{{tableStructure.physicsTableName}}</el-descriptions-item>
              <el-descriptions-item label="表名">{{tableStructure.tableName}}</el-descriptions-item>
            </el-descriptions>
          </div>
          <div style="width: 100%">
            <el-table
              :data="tableStructure.field"
              style="width: 100%"
            >
              <el-table-column
                prop="physicsFieldName"
                label="物理字段名"
                >
              </el-table-column>
              <el-table-column
                prop="fieldName"
                label="字段名"
                >
              </el-table-column>
              <el-table-column
                prop="fieldType"
                label="字段类型"
                >
              </el-table-column>
              <el-table-column
                prop="fieldAttribute"
                label="字段属性"
                >
              </el-table-column>
<!--              操作-->
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button @click="tableStructureEdit(scope.row)" type="primary" size="mini">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="数据集成" name="数据集成">
          <el-descriptions border title="主要信息">
            <template slot="extra">
              <el-button size="small">立即运行</el-button>
              <el-button @click="dataIntegration.editDialogVisible = true" type="primary" size="small">编辑</el-button>
            </template>
            <el-descriptions-item label="任务名称">{{dataIntegration.mainInfo.taskName}}</el-descriptions-item>
            <el-descriptions-item label="上次运行成功时间">{{dataIntegration.mainInfo.lastRunSuccessTime}}</el-descriptions-item>
            <el-descriptions-item label="上次运行失败时间">{{dataIntegration.mainInfo.lastRunFailTime}}</el-descriptions-item>
            <el-descriptions-item label="调度计划">{{dataIntegration.mainInfo.schedulingPlan}}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions style="margin-top: 2vh;" border title="任务运行记录">
          </el-descriptions>
          <el-table
            :data="dataIntegration.tableData"
            style="width: 100%"
          >
            <el-table-column
              prop="taskName"
              label="任务名称"
            >
            </el-table-column>
            <el-table-column
              prop="lastRunSuccessTime"
              label="上次运行成功时间"
            >
            </el-table-column>
            <el-table-column
              prop="lastRunFailTime"
              label="上次运行失败时间"
            >
            </el-table-column>
            <el-table-column
              prop="schedulingPlan"
              label="调度计划"
            >
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="清洗规则" name="清洗规则"></el-tab-pane>
        <el-tab-pane label="血缘关系" name="血缘关系"></el-tab-pane>
        <el-tab-pane label="高级选项" name="高级选项">
          <el-card class="advancedOptionBoxCard">
            <div slot="header" class="clearfix">
              <span>停用须知</span>
              <el-button style="float: right; padding: 3px 0" type="text">停用</el-button>
            </div>
            <div class="text item">
              停用表示表内容不可读取，写入
            </div>
          </el-card>

          <el-card class="advancedOptionBoxCard">
            <div slot="header" class="clearfix">
              <span>删除须知</span>
              <el-button style="float: right; padding: 3px 0" type="text">删除</el-button>
            </div>
            <div class="text item">
              删除后无法恢复！！！删除前请先将其停用，删除贴源表同时将会删除贴源表的数据采集任务
            </div>
          </el-card>
        </el-tab-pane>

      </el-tabs>
    </el-main>
    <el-dialog
      top="10vh"
      title="筛选条件"
      :visible.sync="dataPage.filterateDialogVisible"
    >
      <div v-for="i in dataPage.filterateList">
        <el-row style="margin-top: 1vh">
          <el-col v-show="getIndex(dataPage.filterateList, i) !== 0" :span="3">
            <el-select v-model="i.conjunction" placeholder="请选择连接符">
              <el-option label="and" value="and"></el-option>
              <el-option label="or" value="or"></el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="i.option" placeholder="请选择参数">
              <el-option v-for="item in dataPage.filterateOption" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="i.operator" placeholder="请选择符号">
              <el-option v-for="item in dataPage.operatorOption" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-input v-model="i.value" placeholder="请输入值"></el-input>
          </el-col>
<!--          删除图标-->
          <el-col :span="1" style="margin-left: 1vw">
            <el-button @click="dataPageDeleteFilterate(i)" type="danger" icon="el-icon-delete"></el-button>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dataPage.filterateDialogVisible = false">取 消</el-button>
        <el-button @click="dataPageAddFilterate()">新 增</el-button>
        <el-button type="primary" @click="dataPage.filterateDialogVisible = false">确 定</el-button>
      </span>

    </el-dialog>
<!--    表结构修改弹窗-->
    <el-dialog
      title="表结构修改"
      :visible.sync="tableStructure.tableStructureDialogVisible"
    >
      <el-form label-width="100px">
        <el-form-item label="物理字段名">
          <el-input v-model="tableStructure.tableStructureDialog.physicsFieldName"></el-input>
        </el-form-item>
        <el-form-item label="字段名">
          <el-input v-model="tableStructure.tableStructureDialog.fieldName"></el-input>
        </el-form-item>
        <el-form-item label="字段类型">
          <el-input v-model="tableStructure.tableStructureDialog.fieldType"></el-input>
        </el-form-item>
        <el-form-item label="字段属性">
          <el-input v-model="tableStructure.tableStructureDialog.fieldAttribute"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="tableStructure.tableStructureDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="tableStructureEditConfirm()">确 定</el-button>
      </span>
    </el-dialog>
<!--    数据集成编辑弹窗-->
    <el-dialog
      title="数据集成编辑"
      :visible.sync="dataIntegration.editDialogVisible"
    >
      <el-form label-width="150px">
        <el-form-item label="任务名称：">
          <el-input v-model="dataIntegration.editData.taskName"></el-input>
        </el-form-item>
        <el-form-item label="来源表：">
          <span>{{ dataIntegration.editData.sourceTable }}</span>
        </el-form-item>
        <el-form-item label="同步方式：">
          <span>{{ dataIntegration.editData.synchronizationMethod }}</span>
        </el-form-item>
        <el-form-item label="调度周期：">
          <el-select v-model="dataIntegration.editData.schedulingCycle" placeholder="请选择调度周期">
            <el-option label="每天" value="每天"></el-option>
            <el-option label="每周" value="每周"></el-option>
            <el-option label="每月" value="每月"></el-option>
            <el-option label="每年" value="每年"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="查询关键字：">
          <el-input v-model="dataIntegration.editData.tableDataSearchKeyword"></el-input>
        </el-form-item>

        <el-table
          :data="dataIntegration.editData.showEditTableData"
          style="width: 100%"
        >
          <el-table-column
            prop="fieldName"
            label="字段名"
          >
          </el-table-column>
          <el-table-column
            prop="comment"
            label="注释"
          >
          </el-table-column>
          <el-table-column
            prop="fieldType"
            label="字段类型"
          >
          </el-table-column>
          <el-table-column
            label="是否主键"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isPrimaryKey"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column
            label="是否采集"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isCollection"></el-checkbox>
            </template>
          </el-table-column>
        </el-table>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dataIntegration.editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dataIntegration.editDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {myAllTableData} from "@/views/tieYuan/data";
export default {
  name: "tieYuanTableDetails",
  components: {
  },
  data(){
    return {
      routerRow: this.$route.query.row,
      activeName: '高级选项',
      //概览信息
      overview: {
        //源头表信息
        sourceTable: {
          //外部数据源名称
          externalDataSourceName: '外部数据源名称',
          // 源头表
          physicsTableName: '源头表',
          //源头表数据量
          dataVolume: '源头表数据量',
          //数据特征
          dataFeature: '数据特征',
        },
        //本表信息
        thisTable: {
          //位置
          location: '贴源层',
          //表名
          tableName: '奖学金学生名单',
          //数据量(条)
          dataVolume: '1000',
          //累计起始时间
          cumulativeStartTime: '2021-01-01',
          //累计截止时间
          cumulativeEndTime: '2021-12-31',
          //责任单位
          responsibleUnit: '财务处',
          //模式
          mode: 'ods',
          //物理表名
          physicsTableName: 'ods_scholarship_student_list',
          //字段(个)
          field: '10',
          //数据特征
          dataFeature: '数据特征',
          //集成情况
          integrationSituation: '集成情况',
          //数据上次更新
          dataLastUpdateTime: '2021-01-01',
          //创建时间
          createTime: '2021-01-01',
          //最后修改时间
          lastModifyTime: '2021-01-01',

        }
      },
      //数据页面
      dataPage: {
        filterateOption: [
          {
            label: '区域一',
            value: 'shanghai'
          },
          {
            label: '区域二',
            value: 'beijing'
          }
        ],
        operatorOption: [
          {
            label: '=',
            value: '='
          },
          {
            label: '<>',
            value: '<>'
          },
          {
            label: '>',
            value: '>'
          },
          {
            label: '<',
            value: '<'
          },
          {
            label: '>=',
            value: '>='
          },
          {
            label: '<=',
            value: '<='
          },
          {
            label: 'like',
            value: 'like'
          },
          {
            label: 'in',
            value: 'in'
          },
          {
            label: 'not in',
            value: 'not in'
          }
        ],
        filterateList: [
          {
            conjunction: 'and',
            option: '区域一',
            operator: '等于',
            value: '1'
          }
        ],
        filterateDialogVisible: false,
        currentPage: 1,
        size: 20,
        totalNumber: 1,
        searchContent: '',
        tableLabel: [
          //WID,学生编号，助学金代码，助学金等级代码，数据来源，同步日期，同步操作，操作日期，操作者，操作者姓名，批次代码，
          {
            label: 'WID',
            prop: 'wid'
          },
          {
            label: '学生编号',
            prop: 'studentNumber'
          },
          {
            label: '助学金代码',
            prop: 'scholarshipCode'
          },
          {
            label: '助学金等级代码',
            prop: 'scholarshipLevelCode'
          },
          {
            label: '数据来源',
            prop: 'dataSource'
          },
          {
            label: '同步日期',
            prop: 'synchronizationDate'
          },
          {
            label: '同步操作',
            prop: 'synchronizationOperation'
          },
          {
            label: '操作日期',
            prop: 'operationDate'
          },
          {
            label: '操作者',
            prop: 'operator'
          },
          {
            label: '操作者姓名',
            prop: 'operatorName'
          },
          {
            label: '批次代码',
            prop: 'batchCode'
          }
        ],
        showTableData: [],
        allTableData: myAllTableData
      },
      // 表结构
      tableStructure: {
        //物理表名
        physicsTableName: 'ods_scholarship_student_list',
        //表名
        tableName: '奖学金学生名单',
        //字段
        field:[
          {
            //物理字段名
            physicsFieldName: 'WID',
            //字段名
            fieldName: 'WID',
            //字段类型
            fieldType: '文本',
            //字段属性
            fieldAttribute: '40',
          },
          {
            //物理字段名
            physicsFieldName: '学生编号',
            //字段名
            fieldName: 'studentNumber',
            //字段类型
            fieldType: '文本',
            //字段属性
            fieldAttribute: '40',
          },
          {
            //物理字段名
            physicsFieldName: '助学金代码',
            //字段名
            fieldName: 'scholarshipCode',
            //字段类型
            fieldType: '文本',
            //字段属性
            fieldAttribute: '40',
          },
          {
            //物理字段名
            physicsFieldName: '助学金等级代码',
            //字段名
            fieldName: 'scholarshipLevelCode',
            //字段类型
            fieldType: '文本',
            //字段属性
            fieldAttribute: '40',
          },
          {
            //物理字段名
            physicsFieldName: '数据来源',
            //字段名
            fieldName: 'dataSource',
            //字段类型
            fieldType: '文本',
            //字段属性
            fieldAttribute: '40',
          },
          {
            //物理字段名
            physicsFieldName: '同步日期',
            //字段名
            fieldName: 'synchronizationDate',
            //字段类型
            fieldType: '文本',
            //字段属性
            fieldAttribute: '40',
          },
          {
            //物理字段名
            physicsFieldName: '同步操作',
            //字段名
            fieldName: 'synchronizationOperation',
            //字段类型
            fieldType: '文本',
            //字段属性
            fieldAttribute: '40',
          },
          {
            //物理字段名
            physicsFieldName: '操作日期',
            //字段名
            fieldName: 'operationDate',
            //字段类型
            fieldType: '文本',
            //字段属性
            fieldAttribute: '40',
          },
          {
            //物理字段名
            physicsFieldName: '操作者',
            //字段名
            fieldName: 'operator',
            //字段类型
            fieldType: '文本',
            //字段属性
            fieldAttribute: '40',
          },
        ],
        tableStructureDialogVisible: false,
        tableStructureDialog: {
          physicsFieldName: '',
          fieldName: '',
          fieldType: '',
          fieldAttribute: ''
        }
      },
      // 数据集成
      dataIntegration: {
        mainInfo: {
          // 任务名称
          taskName: '任务名称1',
          // 上次运行成功时间
          lastRunSuccessTime: '2021-01-01',
          // 上次运行失败时间
          lastRunFailTime: '2021-01-01',
          // 调度计划
          schedulingPlan: '调度计划',
        },
        //编辑窗口
        editDialogVisible: false,
        //编辑行数据
        editRowDialogVisible: false,
        tableData: [
          {
            //任务名称
            taskName: '任务名称1',
            //上次运行成功时间
            lastRunSuccessTime: '2021-01-01',
            //上次运行失败时间
            lastRunFailTime: '2021-01-01',
            //调度计划
            schedulingPlan: '调度计划',
          },
          {
            //任务名称
            taskName: '任务名称2',
            //上次运行成功时间
            lastRunSuccessTime: '2021-01-01',
            //上次运行失败时间
            lastRunFailTime: '2021-01-01',
            //调度计划
            schedulingPlan: '调度计划',
          },
          {
            //任务名称
            taskName: '任务名称3',
            //上次运行成功时间
            lastRunSuccessTime: '2021-01-01',
            //上次运行失败时间
            lastRunFailTime: '2021-01-01',
            //调度计划
            schedulingPlan: '调度计划',
          },
          {
            //任务名称
            taskName: '任务名称4',
            //上次运行成功时间
            lastRunSuccessTime: '2021-01-01',
            //上次运行失败时间
            lastRunFailTime: '2021-01-01',
            //调度计划
            schedulingPlan: '调度计划',
          },
          {
            //任务名称
            taskName: '任务名称5',
            //上次运行成功时间
            lastRunSuccessTime: '2021-01-01',
            //上次运行失败时间
            lastRunFailTime: '2021-01-01',
            //调度计划
            schedulingPlan: '调度计划',
          },
        ],
        editData: {
          //任务名称
          taskName: 'ods_scholarship_student_list采集任务',
          // 来源表
          sourceTable: 'T_ZXJ_SCHOLARSHIP_STUDENT_LIST',
          // 同步方式
          synchronizationMethod: '全量同步',
          // 调度周期
          schedulingCycle: '每天',
          // 表数据
          showEditTableData: [],
          allEditTableData: [
            {
              // 字段名
              fieldName: 'WID',
              // 注释
              comment: '主键',
              // 字段类型
              fieldType: '文本',
              // 是否主键
              isPrimaryKey: true,
              // 是否采集
              isCollection: true,
            },
            {
              // 字段名
              fieldName: '学生编号',
              // 注释
              comment: '学生编号',
              // 字段类型
              fieldType: '文本',
              // 是否主键
              isPrimaryKey: false,
              // 是否采集
              isCollection: true,
            },
            {
              // 字段名
              fieldName: '助学金代码',
              // 注释
              comment: '助学金代码',
              // 字段类型
              fieldType: '文本',
              // 是否主键
              isPrimaryKey: false,
              // 是否采集
              isCollection: true,
            },
            {
              // 字段名
              fieldName: '助学金等级代码',
              // 注释
              comment: '助学金等级代码',
              // 字段类型
              fieldType: '文本',
              // 是否主键
              isPrimaryKey: false,
              // 是否采集
              isCollection: true,
            },
            {
              // 字段名
              fieldName: '数据来源',
              // 注释
              comment: '数据来源',
              // 字段类型
              fieldType: '文本',
              // 是否主键
              isPrimaryKey: false,
              // 是否采集
              isCollection: true,
            },
            {
              // 字段名
              fieldName: '同步日期',
              // 注释
              comment: '同步日期',
              // 字段类型
              fieldType: '文本',
              // 是否主键
              isPrimaryKey: false,
              // 是否采集
              isCollection: true,
            },
            {
              // 字段名
              fieldName: '同步操作',
              // 注释
              comment: '同步操作',
              // 字段类型
              fieldType: '文本',
              // 是否主键
              isPrimaryKey: false,
              // 是否采集
              isCollection: true,
            },
            {
              // 字段名
              fieldName: '操作日期',
              // 注释
              comment: '操作日期',
              // 字段类型
              fieldType: '文本',
              // 是否主键
              isPrimaryKey: false,
              // 是否采集
              isCollection: true,
            },
          ],
          tableDataSearchKeyword: '',
        }
      },

    }
  },
  methods: {

    tableStructureEditConfirm(){
      this.tableStructure.tableStructureDialogVisible = false
    },
    tableStructureEdit(row){
      this.tableStructure.tableStructureDialogVisible = true
      this.tableStructure.tableStructureDialog = row
    },
    dataPageDeleteFilterate(item){
      // 如果只有一个筛选条件，不允许删除
      if(this.dataPage.filterateList.length === 1){
        return
      }
      let index = this.getIndex(this.dataPage.filterateList, item)
      this.dataPage.filterateList.splice(index, 1)

    },
    dataPageAddFilterate(){
      this.dataPage.filterateList.push({
        conjunction: '',
        option: '',
        operator: '',
        value: ''
      })
    },
    //获取一个元素在数组中的位置
    getIndex(arr, obj) {
      let index = arr.findIndex((value) => {
        return value === obj
      })
      return index
    },
    //初始化dataPageTableBox的高度
    initDataPageTableBoxHeight() {
      //获取浏览器的高度，将mainBody的高度设置为屏幕的高度减去header的高度
      let screenHeight = document.documentElement.clientHeight;
      let headerHeight = 350;
      let mainBody = document.getElementsByClassName("dataPageTableBox")[0];
      mainBody.style.height = screenHeight - headerHeight + "px";
    },
    dataPageHandleSizeChange(val){
      this.dataPage.size = val
      this.dataPage.currentPage = 1
      this.dataPageShowTableData()
    },
    dataPageHandleCurrentChange(val){
      this.dataPage.currentPage = val
      this.dataPageShowTableData()
    },
    dataPageShowTableData(){
      let start = (this.dataPage.currentPage - 1) * this.dataPage.size
      let end = this.dataPage.currentPage * this.dataPage.size
      this.dataPage.showTableData = this.dataPage.allTableData.slice(start, end)
    },

  },
  //接收跳转时传入的query: {id: row.id}
  mounted(){
    this.initDataPageTableBoxHeight()
    this.dataPage.totalNumber = this.dataPage.allTableData.length
    this.dataPageShowTableData()
    this.dataIntegration.editData.showEditTableData = this.dataIntegration.editData.allEditTableData
  },
  watch: {
    '$route.query.row': function (val) {
      this.routerRow = val
      console.log('watch',val)
    },
    'dataIntegration.editData.tableDataSearchKeyword': function (val) {
      if(val === ''){
        this.dataIntegration.editData.showEditTableData = this.dataIntegration.editData.allEditTableData
      }
      // 根据关键字检索字段名和注释
      let tmp = JSON.parse(JSON.stringify(this.dataIntegration.editData.allEditTableData))
      this.dataIntegration.editData.showEditTableData = tmp.filter((item) => {
        return item.fieldName.indexOf(val) !== -1 || item.comment.indexOf(val) !== -1
      })
    }
  }

}

</script>


<style scoped lang="scss">
.advancedOptionBoxCard {
  width: 20vw;
  height: 20vh;
  display: inline-block;
  margin-left: 2vw;
  margin-top: 2vh;
}
</style>
